import {useState} from "react";
//超级社团
import React from 'react'
import Article from "../Article/Article";
import Carousel from "../Carousel/Carousel";
import jsonClubPublicize from "../../axios/ClubPublicize.json";

export default function SuperClub() {
    const clubPublicize = jsonClubPublicize.data
    const [show, setshow] = useState(false);
    return (
        <div className="SuperClub">

            <div className="container text-dark shadow-sm p-3 mb-5 bg-white rounded">
                <div class="row">
                    <div className="container text-center row ">
                        <div className="col col-lg-2">
                            <h4 className="list-group-item list-group-item-action " style={{cursor: "pointer"}}
                                onClick={() => {
                                    setshow(!show)
                                }}>我的社团</h4>
                            <div className={show ? "dropdown-menu show" : "dropdown-menu"} style={{float: "left"}}>
                                <a className="dropdown-item" href="#">加入的社团</a>
                                <a className="dropdown-item" href="#">更多社团</a>
                            </div>
                        </div>
                        <div className="col-md-auto"> {/* 可变宽度内容 */}
                            <input className="form-control " type="search" placeholder="请输入12位社团号搜索"
                                   aria-label="Search"/>
                        </div>
                        <div className="col col-lg-2">
                            <button className="btn btn-outline-success my-2 my-sm-0" type="submit"
                                    style={{height: "50"}}>搜索
                            </button>
                        </div>
                    </div>
                    <hr></hr>
                    <div class="col">
                        <span style={{float: "left"}}> 热门社团</span>
                    </div>
                    <div class="col">
                        <span style={{float: "right"}}>更多{">"}</span>
                    </div>
                </div>
                <div class="row">
                    {clubPublicize.map((item, index) => {
                        return <div class="col h4" style={{padding: 1}}>
                            <img className="d-block w-100 rounded" style={{height: 170}} src={item.imgUrl}
                                 alt={`Slide ${index}`}/>
                            <hr/>
                            社团名称：{item.clubName}
                        </div>
                    })}
                </div>
            </div>
            <div>
                <Carousel flag="true"/>
                {/* 文章页面 */}
                <Article jsonUrl='ArticleSuperClub' flag="true"/>
            </div>
        </div>
    )
}
